<template>
  <div class="tourist">
    <div class="top">
      <span style="color: aliceblue;font-weight: 700;font-size: 20px;">男女比例</span>
      <div class="logo"></div>

    </div>
    <div class="center">
      <div class="left">
        <img src="@/views/screen/images/man.png" alt="">
      </div>
      <div class="right">
        <img src="@/views/screen/images/woman.png" alt="">
      </div>
    </div>

    <div class="bottom">
      <span class="left">男士60%</span>
      <span class="right">女士40%</span>

    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>
<script setup name='sex'>
  import { ref, onMounted } from 'vue'
  //echarts插件引入
  import * as echarts from 'echarts'
  //水球图拓展插件
  import 'echarts-liquidfill'
  let people = ref('20008123人')
  //水球图的实例
  let charts = ref()
  onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
      xAxis: {
        show: false,
        min:0,
        max:100

      },
      yAxis: {
        show: false,
        type: 'category'
      },
      series: [
        {
      type: 'bar', data: [58], barWidth: 20, z: 100,
      itemstyle: {  borderRadius: 20 }
    },
      {
        type: 'bar', data: [100], barWidth: 20,barGap:'-100%',
        itemstyle: { borderRadius: 20 }
      }]
    })
  })
</script>
<style scoped lang='scss'>
  .tourist {
    margin: 10px 0 20px 30px;
    position: relative;
    background: url('@/views/screen/images/dataScreen-main-lt.png') no-repeat;
    background-size: cover;

    .top {
      .logo {

        display: block;
        margin-top: 10px;
        width: 68px;
        height: 7px;
        background: url('@/views/screen/images/dataScreen-title.png') no-repeat;

      }


    }

    .center {
      margin-top: 40px;
      display: flex;

      justify-content: center;

      .left {
        margin: 20px;
        width: 111px;
        height: 115px;
        background: url('@/views/screen/images/man-bg.png') no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .right {
        margin: 20px;
        width: 111px;
        height: 115px;
        background: url('@/views/screen/images/woman-bg.png') no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .bottom {
      padding: 0 114px;
      display: flex;
      justify-content: space-between;
     
      .left,.right{
        color:#fff
      }
    }


  }
  .charts{
    width: 100%;
    height: 40px;
  }
</style>